<html>
<head>
	<script type="text/javascript" src="mongodb.js" ></script>
	<style type="text/css">
		.header, .cell {
			float: left;
			background-color: inherit;
		}
		.row:nth-child(odd) {
			background-color: #AAA;
		}
		.header:nth-child(1), .cell:nth-child(1){
			width : 50px;
		}
		.header:nth-child(2), .cell:nth-child(2){
			width : 275px;
		}
		.header:nth-child(3), .cell:nth-child(3){
			width : 50px;
		}
		.header:nth-child(4), .cell:nth-child(4){
			width : 75px;
		}
		.row {
			clear: both;
		}
	</style>
</head>
<body>
    <dl>
        <dt>DB Name:</dt>
        <dd><input type="text" id="db.name" name="db.name" value="test" /></dd>
        <dt>Collection Name:</dt>
        <dd><input type="text" id="col.name" name="col.name" value="room" /></dd>
        <dt>ID:</dt>
        <dd><input type="text" id="recordid" name="recordid" style="width:200px;" /></dd>
        <dt>Query:</dt>
        <dd><textarea rows="5" cols="60" id="query" name="query" >{}</textarea></dd>
        <dt>Results:</dt>
        <dd>
            <div id="results">

            </div>
        </dd>
    </dl>
	<input type="button" value="Execute" onclick="execute();" />
    <input type="button" value="Save" onclick="save();" />
    <input type="button" value="Update" onclick="update();" />

	<script type="text/javascript">
		var dbCursor = null;
	
		var getDB = function(){
			var mongo = new org.jsmud.db.Mongo('localhost', 3000);
	        return mongo.getDb('room');
		}
		var iterate = function(list, callback){
			if( typeof list == 'Array'){
				for(var index=0; index < list.length; index++)
					callback(list[index], index);
			}else{
				for(var field in list){
					callback(list[field], field);
				}
			}
		}
		var buildRows = function(obj){
			var array = obj;
			var html = ''
			var columns = {};

			iterate(array.results, function(item){
				for(field in item){
					if( !columns[field] ){
						columns[field] = field;
					}
				};
			});
			html += '<div class="row">'
			html += '<div class="header">&nbsp;</div>';
			iterate(columns, function(column){
				html += '<div class="header">';
				html += column;
				html += '</div>';
			});
			html += '</div>'
			iterate(array.results, function(item, index){
				html += '<div class="row">';
				html += '<div class="cell">' + index + '</div>';
				iterate(columns, function(column){
					html += '<div class="cell"><textarea rows="1" name="' + column + '">';
					html += (item[column] ? JSON.stringify(item[column]) : '');
					html += '</textarea></div>';
				})
				html += '<input id="row' + index + '" type="button" value="update" onclick="javascript:update('+index+')"></input>';
				html += '</div>';
			})
			return html;
		}
		
		var execute = function(){
			if( !query.value ) query.value = '{}'
			var criteria = {
				example : query.value ? eval('(' + query.value + ')') : null
				,limit  : 100
			};
            getDB().find(criteria, function(result){
            	dbCursor = result;
            	results.innerHTML = buildRows(result);
            }, function(err){
                results.innerText = err;
            });
        }
        var save = function(){
        	getDB().save(eval('('+query.value+')'), function(result){
                results.innerText = result;
            }, function(err){
                results.innerText = err;
            })
        }
        var update = function(index){
        	var record = dbCursor.results[index];
            var id = {
            	_id : record._id
            };
            getDB().update(id, record, function(result, xmlhttp){
            	console.log(xmlhttp.responseText);
            	//dbCursor = result;
            	results.innerHTML = buildRows(dbCursor);
            }, function(err){
                results.innerText = err;
            });
        }
	</script>
</body>
</html>
